<template>
    <view class="page">
        <view class="page-head">
            <swiper class="page-head-img" autoplay="true" v-if="needDetail.img_array_url.length>0"
                    interval="3000"
                    duration="1000"
                    indicator-dots="true"
                    indicator-active-color="#FFFFFF"
                    circular="true">
                <swiper-item v-for="(url , index) in needDetail.img_array_url" :key="index">
                    <img :src="url" mode="aspectFit"/>
                </swiper-item>
            </swiper>
        </view>
        <view class="page-needs-content">
            <view class="needs-title">{{needDetail.title}}</view>
            <view class="needs-content">
                <text>{{needDetail.content}}</text>
<!--                <text class="needs-content-desc">广州途远企业管理咨询有限公司是一家专业提供体验式培训以及大型户外活动设计实施服务的公司。主要从事户外拓展训练、企业室内培训课程、主题户外活动设计等方面的咨询和培训服务。</text>-->
<!--                <text>岗位职责：</text>-->
<!--                <text>1、参与公司创意策略的研讨和制定，负责品牌产品的平面设计；</text>-->
<!--                <text>2、负责公司公众号、网站推广的设计美化，可独立完成各类设计工作；</text>-->
<!--                <text>3、负责公司日常宣传的平面设计与制作，如：新闻稿、企业宣传资料、产品手册等；</text>-->
<!--                <text>4、负责其他相关的平面设计</text>-->
            </view>
            <view class="page-head-tip">
                <view class="head-tip-left">
                    <view class="tip-left-item">
                        <img :src="File_Url+'eyes-icon.png'" />
                        <text>{{needDetail.browse_num}}</text>
                    </view>
                    <view class="tip-left-item">
                        <img :src="File_Url+'collect.png'" v-if="needDetail.is_collection==2"/>
                        <img :src="File_Url+'collect-active.png'" v-else />
                        <text>{{needDetail.attention_num}}</text>
                    </view>
                </view>
                <view class="head-tip-right">发布时间：{{(needDetail.created_at || '').split(' ')[0]}}</view>
            </view>
<!--            <view class="needs-term-item">-->
<!--                <view class="term-item-head">-->
<!--                    <img :src="File_Url+'recruitment-position.png'" />-->
<!--                    <text>招聘职位</text>-->
<!--                </view>-->
<!--                <view class="term-item-content">-->
<!--                    平面设计师-->
<!--                </view>-->
<!--            </view>-->
<!--            <view class="needs-term-item">-->
<!--                <view class="term-item-head">-->
<!--                    <img :src="File_Url+'position-salary.png'" />-->
<!--                    <text>职位薪酬</text>-->
<!--                </view>-->
<!--                <view class="term-item-content">-->
<!--                    4-6k-->
<!--                </view>-->
<!--            </view>-->
<!--            <view class="needs-term-item">-->
<!--                <view class="term-item-head">-->
<!--                    <img :src="File_Url+'education.png'" />-->
<!--                    <text>学历</text>-->
<!--                </view>-->
<!--                <view class="term-item-content">-->
<!--                    本科以上-->
<!--                </view>-->
<!--            </view>-->
            <view class="needs-term-item" v-if="needDetail.recruitment>0">
                <view class="term-item-head">
                    <img :src="File_Url+'recruits-number.png'" />
                    <text>所需人数</text>
                </view>
                <view class="term-item-content">
                    {{needDetail.recruitment}}人
                </view>
            </view>
            <view class="needs-term-item" v-if="needDetail.end_time!=null">
                <view class="term-item-head">
                    <img :src="File_Url+'arrival-time.png'" />
                    <text>截止时间</text>
                </view>
                <view class="term-item-content">
                    {{(needDetail.end_time||'').split(' ')[0]}}
                </view>
            </view>
            <view class="needs-term-item" v-if="needDetail.province!=null&&needDetail.city!=null&&needDetail.area!=null">
                <view class="term-item-head">
                    <img :src="File_Url+'working-place.png'" />
                    <text>所在地区</text>
                </view>
                <view class="term-item-content">
                    <!--{{needDetail.province[3]=='市'?needDetail.province:(needDetail.province+needDetail.city)}}{{needDetail.area}}{{needDetail.address==null?'':needDetail.address}}-->
                    {{needDetail.province}}{{needDetail.city}}{{needDetail.area!="全部"?needDetail.area:''}}
                </view>
            </view>
            <view class="needs-term-item" style="height: 180rpx">
                <view class="term-item-head">
                    <img :src="File_Url+'aboutus.png'" />
                    <text>服务类型</text>
                </view>
                <view class="term-item-content">
                    {{needDetail.classify_name}}
                </view>
                <!--<view class="page-head-tip">
                    <view class="head-tip-left">
                        <view class="tip-left-item" v-if="needDetail.max_butting_num">
                            <img src="../../../static/img/needs_limit.png" />
                            <text>{{needDetail.max_butting_num}}</text>
                        </view>
                        <view class="tip-left-item" v-if="needDetail.budget">
                            <img src="../../../static/img/server_budget.png" />
                            <text>{{needDetail.budget}}</text>
                        </view>
                    </view>
                </view>-->
            </view>
            <view class="needs-term-item" v-if="needDetail.budget">
                <view class="term-item-head">
                    <img class="spec-img" width="20rpx" height="20rpx" src="../../../static/img/server_budget.png" />
                    <text>服务预算</text>
                </view>
                <view class="term-item-content">
                    {{needDetail.budget}}
                </view>
            </view>
            <view class="needs-term-item" v-if="needDetail.max_butting_num">
                <view class="term-item-head">
                    <img class="spec-img"  src="../../../static/img/needs_limit.png" />
                    <text>对接人数上限</text>
                </view>
                <view class="term-item-content" v-if="needDetail.max_butting_num > 0">
                    {{needDetail.max_butting_num}}
                    <span style="float: right;margin-right: 10rpx" v-if="needDetail.butt_info.length > 0">{{needDetail.butt_info.length}}人已联系</span>
                </view>
                <view class="term-item-content" v-if="needDetail.max_butting_num <= 0">
                    不限制
                </view>
            </view>
<!--            <view class="needs-term-item">-->
<!--                <view class="term-item-head">-->
<!--                    <img :src="File_Url+'position-temptation.png'" />-->
<!--                    <text>协会对接</text>-->
<!--                </view>-->
<!--                <view class="term-item-content">-->
<!--                    {{needDetail.is_association_docking==1?'是':'否'}}-->
<!--                </view>-->
<!--            </view>-->
        </view>
        <view class="page-needs-publisher" v-if="needDetail.user_info.user_id">
            <view class="needs-publisher-title">发布方</view>
            <view class="user-list">
                <view class="user-list-item" @click="skipPublisherDetail(needDetail.user_id)" >
                    <view class="list-item-left">
                        <img :src="needDetail.user_info.photo_url" />
                        <img class="icon" :src="File_Url+'vip-icon.png'" v-if="needDetail.user_info.is_vip==1" />
                    </view>
                    <view class="list-item-right">
                        <view class="item-center-top">
<!--                            <text>{{ needDetail.user_info.realname}}</text>-->
<!--                            <img class="icon" :src="File_Url+'vip-icon.png'" v-if="needDetail.user_info.is_vip==1" />-->
<!--                            <text class="blue">{{needDetail.user_info.phone}}</text>-->
                        </view>
                        <view class="item-center-bottom">
<!--                            <view class="center-bottom-item">-->
<!--                                <img :src="File_Url+'personal-active.png'" />-->
<!--                                <text>个人认证</text>-->
<!--                            </view>-->
                            <view class="center-bottom-item" v-if="needDetail.user_info.is_unit_auth==1&&needDetail.user_info.is_member_unit!=1&&needDetail.user_info.is_official_unit!=1">
                                <img :src="File_Url+'company-active.png'" v-if="needDetail.user_info.is_unit_auth==1"/>
                                <img :src="File_Url+'company.png'" v-if="needDetail.user_info.is_unit_auth==0"/>
                                <text>单位认证</text>
                            </view>
                            <view class="center-bottom-item" v-if="needDetail.user_info.is_member_unit==1">
                                <img :src="File_Url+'memberunit.png'" />
                                <text>会员单位</text>
                            </view>
                            <view class="center-bottom-item" v-if="needDetail.user_info.is_official_unit==1">
                                <img :src="File_Url+'official.png'" />
                                <text>官方单位</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="page-needs-buttjoint">
            <view class="needs-buttjoint-title">
                <span>对接方</span>
                <view class="needs-buttjoint-title-right" v-if="needDetail.butt_info.length>=3">
                    <view class="portrait">
                        <img v-if="needDetail.butt_info.length>=3" v-for="(item,index) in needDetail.butt_info" :key="index" class="right-portrait" :src="item.user_info.photo_url"/>
                    </view>
                    <text>{{needDetail.butt_info.length}}人</text>
                </view>
            </view>
            <view class="user-list">
                <view class="null" v-if="needDetail.butt_info.length==0">
                    <text>暂无用户申请对接需求</text>
                </view>
                <view class="user-list-item" v-if="needDetail.butt_info.length>0" v-for="(item,index) in needDetail.butt_info" :key="index" @click="skipButtjointDetail(item.user_id)">
                    <view class="list-item-left">
                        <img :src="item.user_info.photo_url" />
                        <img class="icon" :src="File_Url+'vip-icon.png'" v-if="item.user_info.is_vip==1" />
                    </view>
                    <view class="list-item-right">
                        <view class="item-center-top">
                            <view class="item-center-bottom">
                                <view class="center-bottom-item" v-if="item.user_info.is_unit_auth==1&&item.user_info.is_member_unit!=1&&item.user_info.is_official_unit!=1">
                                    <img :src="File_Url+'company-active.png'" v-if="item.user_info.is_unit_auth==1"/>
                                    <img :src="File_Url+'company.png'" v-if="item.user_info.is_unit_auth==0"/>
                                    <text>单位认证</text>
                                </view>
                                <view class="center-bottom-item" v-if="item.user_info.is_member_unit==1">
                                    <img :src="File_Url+'memberunit-active.png'" v-if="item.user_info.is_member_unit==1"/>
                                    <img :src="File_Url+'memberunit.png'" v-if="item.user_info.is_member_unit==0"/>
                                    <text>会员单位</text>
                                </view>
                                <view class="center-bottom-item" v-if="item.user_info.is_official_unit==1">
                                    <img :src="File_Url+'official.png'" />
                                    <text>官方单位</text>
                                </view>
                            </view>
<!--                            <text>{{item.user_info.realname}}</text>-->
<!--                            <img class="icon" :src="File_Url+'vip-icon.png'" v-if="item.user_info.is_vip==1" />-->
<!--                            <text class="blue">{{item.user_info.phone}}</text>-->
                            <text v-if="userId == needDetail.user_id || item.user_info.user_id == userId" class="right" :class="{'green':item.status ==1,'blue':item.status==0,'pink':item.status==2}">{{item.status_name==null?'':item.status_name}}</text>
                        </view>
<!--                        <view class="item-center-bottom">-->
<!--                            <view class="center-bottom-item" v-if="item.user_info.is_unit_auth==1&&item.user_info.is_member_unit!=1&&item.user_info.is_official_unit!=1">-->
<!--                                <img :src="File_Url+'company-active.png'" v-if="item.user_info.is_unit_auth==1"/>-->
<!--                                <img :src="File_Url+'company.png'" v-if="item.user_info.is_unit_auth==0"/>-->
<!--                                <text>单位认证</text>-->
<!--                            </view>-->
<!--                            <view class="center-bottom-item" v-if="item.user_info.is_member_unit==1">-->
<!--                                <img :src="File_Url+'memberunit-active.png'" v-if="item.user_info.is_member_unit==1"/>-->
<!--                                <img :src="File_Url+'memberunit.png'" v-if="item.user_info.is_member_unit==0"/>-->
<!--                                <text>会员单位</text>-->
<!--                            </view>-->
<!--                            <view class="center-bottom-item" v-if="item.user_info.is_official_unit==1">-->
<!--                                <img :src="File_Url+'official.png'" />-->
<!--                                <text>官方单位</text>-->
<!--                            </view>-->
<!--                        </view>-->
                    </view>
                </view>
            </view>
        </view>
        <indexput :inputShow.sync ="inputShow" :Id="needsId" :type="type"></indexput>
        <view class="page-flex-bottom" v-if="!inputShow">
            <view class="flex-bottom-left">
                <img :src="File_Url+'needs-collect-active.png'" @click="unFavoriteDemand" v-if="needDetail.is_collection==1" />
                <img :src="File_Url+'needs-collect.png'" @click="favoriteDemand" v-else />
                <img :src="File_Url+'needs-comment.png'" @click="showInput" />
                <button open-type='share'><img :src="File_Url+'needs-share.png'" /></button>
            </view>
            <view class="flex-bottom-right">
                <button class="grey" v-if="needDetail.user_id != userId&&needDetail.is_submit_butt == 1">已申请对接</button>
                <button class="blue" @click="buttNeeds" v-if="needDetail.user_id != userId&&needDetail.is_submit_butt != 1">我要对接</button>
                <button class="purple" open-type="contact">官方客服</button>
            </view>
        </view>
    </view>
</template>

<script>
    import Indexput from "../../components/inputbar/indexput";
    export default {
        name: "needsDetail",
        components: {Indexput},
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                needsId: '',
                needDetail: {},
                userId : uni.getStorageSync('UserId'),
                inputShow:false,
                type: 'demand'
            }
        },
        onLoad(query){
            this.needsId = query.needsId;
        },
        onShow(){
          this.getDemandDetail();
        },
        onShareAppMessage(){
            return {
                title: this.needDetail.title,
                path: '/pages/details/needsDetail/needsDetail?needsId='+this.needsId
            }
        },
        methods:{
            //获取需求详情
            async getDemandDetail(){
              let params = {
                  user_token: uni.getStorageSync('userToken'),
                  id: this.needsId
              }
              const res = await this.$api.getDemandDetail(params);
              if (res.data.level == 'success'){
                  this.needDetail = res.data.data
              }else {
                  // uni.showToast({
                  //     icon: 'none',
                  //     title: res.data.message,
                  //     duration: 1500
                  // })
                  var _this = this;
                  if (res.data.data==1){
                      uni.showModal({
                          title: res.data.message,
                          content: '是否取消关注/收藏？',
                          success: async res => {
                              if (res.confirm) {
                                  _this.unFavoriteDemand();
                              }else if (res.cancel) {
                                  uni.showToast({
                                      icon:'none',
                                      title: "取消成功！",
                                      duration: 3000
                                  })
                                  setTimeout(function () {
                                      uni.navigateBack({
                                          delta:1
                                      })
                                  },3000)
                              }
                          }
                      })
                  } else {
                      setTimeout(function () {
                          uni.navigateBack({
                              delta:1
                          })
                      },1500)
                  }
              }
            },
            //提交对接请求
            async buttNeeds(){
                if(this.needDetail.butting_num==this.needDetail.max_butting_num){
                    this.$currency.showToast("对接人数已满","none",1500);
                } else {
                    if (uni.getStorageSync('userToken')) {
                        if (uni.getStorageSync('is_personal_auth') == 1) {
                            uni.navigateTo({
                                url: '/pages/details/needsDetail/needsApply/needsApply?id=' + this.needsId
                            })
                        }else if(uni.getStorageSync('is_personal_auth') == 0){
                            uni.showToast({
                                icon:'none',
                                title: "认证审核中，通过后即可对接！",
                                duration: 3000
                            })
                        }else {
                            uni.showModal({
                                title: '提示',
                                content: "您需要完成个人认证才能对接服务，是否前往提交个人认证？",
                                success: function (res) {
                                    if (res.confirm){
                                        uni.navigateTo({
                                            url: '/pages/Authentication/personAuth/personAuth'
                                        })
                                    } else if (res.cancel) {
                                        uni.showToast({
                                            icon:'none',
                                            title: "取消成功！",
                                            duration: 3000
                                        })
                                    }
                                }
                            })
                        }

                        // var _this = this;
                        // uni.showModal({
                        //     title: '提示',
                        //     content: '是否确认提交对接请求？',
                        //     success: async res => {
                        //         if (res.confirm) {
                        //             let params = {
                        //                 demand_id: _this.needDetail.id,
                        //                 user_token: uni.getStorageSync('userToken')
                        //             }
                        //             const ress = await _this.$api.joinDemand(params);
                        //             if (ress.data.level == 'success'){
                        //                 uni.showToast({
                        //                     icon:'success',
                        //                     title: ress.data.message,
                        //                     duration: 3000
                        //                 })
                        //                 this.getDemandDetail();
                        //             }else {
                        //                 if (uni.getStorageSync('is_unit_auth')==1){
                        //                     uni.showToast({
                        //                         icon:'none',
                        //                         title: ress.data.message,
                        //                         duration: 3000
                        //                     })
                        //                 }else {
                        //                     uni.showModal({
                        //                         title: '提示',
                        //                         content: ress.data.message,
                        //                         success: function (res) {
                        //                             if (res.confirm){
                        //                                 uni.navigateTo({
                        //                                     url: '/pages/Authentication/companyAuth/companyAuth'
                        //                                 })
                        //                             } else if (res.cancel) {
                        //
                        //                             }
                        //                         }
                        //                     })
                        //                 }
                        //
                        //                 // uni.showToast({
                        //                 //     icon:'none',
                        //                 //     title: ress.data.message,
                        //                 //     duration: 3000
                        //                 // })
                        //                 // setTimeout(function () {
                        //                 //     uni.navigateTo({
                        //                 //         url: '/pages/Authentication/companyAuth/companyAuth'
                        //                 //     })
                        //                 // },3000)
                        //             }
                        //
                        //         } else if (res.cancel) {
                        //             uni.showToast({
                        //                 icon:'none',
                        //                 title: "取消成功！",
                        //                 duration: 3000
                        //             })
                        //         }
                        //     }
                        // });
                    }else {
                        uni.showToast({
                            icon:'none',
                            title: "请先登录！",
                            duration: 3000
                        })
                        setTimeout(function () {
                            uni.switchTab({
                                url:'/pages/person/person'
                            })
                        },3000)
                    }
                }
            },
            //关注需求
            async favoriteDemand(){
                let params = {
                    demand_id : this.needDetail.id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.favoriteDemand(params)
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getDemandDetail();
                } else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getDemandDetail();
                }
            },
            //取消关注需求
            async unFavoriteDemand(){
                let params = {
                    demand_id : this.needDetail.id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.unFavoriteDemand(params)
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getDemandDetail();
                } else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getDemandDetail();
                }
            },
            //跳转到发布方详情
            skipPublisherDetail(id){
                uni.navigateTo({
                    url: '/pages/details/needsDetail/publisherDetail/publisherDetail?userId='+id+'&&needId='+this.needsId+'&&is_show_publisher='+this.needDetail.is_show_publisher
                })
            },
            //跳转到对接方详情
            skipButtjointDetail(id){
                if(this.userId == this.needDetail.user_id){
                    uni.navigateTo({
                        url: '/pages/details/needsDetail/buttjointDetail/buttjointDetail?userId='+id+'&&needId='+this.needsId+'&&adminId='+this.needDetail.user_id
                    })
                }else {
                    uni.showToast({
                        icon:'none',
                        title: "您不是发布方，无法查看对接用户详情！",
                        duration: 1500
                    })
                }

            },
            showInput(){
                this.inputShow = true
            },
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        min-height: calc(100vh - 128rpx);
        padding-bottom: 128rpx;
    }
    .page-head{
        .page-head-img{
            width: 100vw;
            height: 460rpx;
        }
    }
    .page-needs-content{
        padding: 36rpx 30rpx;
        border-bottom: 10rpx solid #F8F8F8;
        .needs-title{
            /*height: 56rpx;*/
            line-height: 56rpx;
            color: #333333;
            font-size: 35rpx;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .needs-content{
            padding: 20rpx 0 ;
            @include flex(flex-start,flex-start);
            flex-direction: column;
            text{
                font-size: 30rpx;
                line-height: 42rpx;
                color: #333333;
            }
            .needs-content-desc{
                margin-bottom: 63rpx;
            }
        }
        .page-head-tip{
            margin-top: 20rpx;
            @include flex(flex-start);
            flex-direction: row;
            .head-tip-left{
                @include flex(flex-start);
                flex-direction: row;
                .tip-left-item{
                    @include flex(flex-start);
                    flex-direction: row;
                    margin-right: 20rpx;
                    img{
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 10rpx;
                    }
                    text{
                        color: #666666;
                        height: 40rpx;
                        line-height: 40rpx;
                        font-size: 28rpx;
                    }
                }
            }
            .head-tip-right{
                margin-left: auto;
                color: #333333;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
            }
        }
        .needs-term-item{
            height: 140rpx;
            @include flex(center,flex-start);
            flex-direction: column;
            border-bottom: 1rpx solid #E5E5E5;
            .term-item-head{
                @include flex(flex-start);
                flex-direction: row;
                margin-bottom: 10rpx;
                img{
                    height: 40rpx;
                    width: 40rpx;
                    margin-right: 10rpx;
                }
                text{
                    height: 40rpx;
                    line-height: 40rpx;
                    color: #333333;
                    font-size: 32rpx;
                    font-weight: bold;
                }
                .spec-img{
                    width: 27rpx;
                    height: 27rpx;
                    margin-right: 20rpx;
                }
            }
            .term-item-content{
                padding: 0 0 0 50rpx;
                max-height: 80rpx;
                line-height: 40rpx;
                @include ellipsis(2);
                color: #333333;
                font-size: 28rpx;
                width: 90%;
            }
            .head-tip-left{
                @include flex(flex-start);
                flex-direction: row;
                .tip-left-item{
                    @include flex(flex-start);
                    flex-direction: row;
                    margin-right: 20rpx;
                    img{
                        width: 30rpx;
                        height: 30rpx;
                        margin-right: 10rpx;
                    }
                    text{
                        color: #666666;
                        height: 40rpx;
                        line-height: 40rpx;
                        color: #333333;
                        font-size: 28rpx;
                    }
                }
            }
        }
        .needs-term-item:last-child{
            border-bottom: none;
        }
    }
    .page-needs-publisher{
        padding: 30rpx;
        border-bottom: 10rpx solid #F8F8F8;
        .needs-publisher-title{
            height: 56rpx;
            line-height: 56rpx;
            font-weight: bold;
            font-size: 40rpx;
            color: #333333;
        }
    }
    .page-needs-buttjoint{
        padding: 30rpx;
        border-bottom: 10rpx solid #F8F8F8;
        .needs-buttjoint-title{
            height: 56rpx;
            line-height: 56rpx;
            font-weight: bold;
            font-size: 40rpx;
            color: #333333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .needs-buttjoint-title-right{
            display: flex;
            align-items: center;
            .portrait{
                position: relative;
                width: 70px;
                height: 30px;
                img{
                    border-radius: 50%;
                    width: 30px;
                }
                img:nth-child(1){
                    position: absolute;
                    left: 0px;
                }
                img:nth-child(2){
                    position: absolute;
                    left: 20px;
                    z-index: 3;
                }
                img:nth-child(3){
                    position: absolute;
                    left: 40px;
                    z-index: 9;
                }
            }
            text{
                margin-left: 8px;
                font-size: 14px;
                font-weight: normal;
            }
        }
    }
    .user-list{
        padding: 30rpx 0;
        .user-null{
            @include flex();
            flex-direction: column;
            padding: 30rpx;
        }
        .user-list-item{
            width: calc(100% - 40rpx);
            padding: 20rpx;
            border-radius: 16rpx;
            box-shadow: 0rpx 3rpx 15rpx 0 rgba(10, 95, 236, 0.2);
            margin-bottom: 20rpx;
            @include flex(flex-start);
            flex-direction: row;
            .list-item-left{
                width: 100rpx;
                height: 100rpx;
                margin-right: 30rpx;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 360rpx;
                }
                .icon{
                    position: absolute;
                    right: 0rpx;
                    width: 30rpx;
                    height: 30rpx;
                    bottom: 0rpx;
                }
            }
            .list-item-right{
                @include flex(flex-start,flex-start);
                flex-direction: column;
                width: calc(100% - 130rpx);
                .item-center-top{
                    @include flex(flex-start);
                    flex-direction: row;
                    width: 100%;
                    text{
                        height: 45rpx;
                        line-height: 45rpx;
                        color: #333333;
                        font-size: 32rpx;
                        font-weight: bold;
                        /*margin-right: 20rpx;*/
                    }
                    .icon{
                        width: 40rpx;
                        height: 40rpx;
                    }
                    .blue{
                        color: #3782FF;
                        height: 45rpx;
                        line-height: 45rpx;
                        font-size: 28rpx;
                        font-weight: normal;
                        margin-right: 0rpx;
                    }
                    .right{
                        margin-left: auto;
                    }
                    .green{
                        color: #00C735;
                        height: 45rpx;
                        line-height: 45rpx;
                        font-size: 28rpx;
                        font-weight: normal;
                        margin-right: 0rpx;
                    }
                    .yellow{
                        color: #FFA800;
                        height: 45rpx;
                        line-height: 45rpx;
                        font-size: 28rpx;
                        font-weight: normal;
                        margin-right: 0rpx;
                    }
                    .pink{
                        color: #FF6565;
                        height: 45rpx;
                        line-height: 45rpx;
                        font-size: 28rpx;
                        font-weight: normal;
                        margin-right: 0rpx;
                    }
                }
                .item-center-bottom{
                    @include flex(flex-start,flex-start);
                    flex-direction: row;
                    margin-top: 4rpx;
                    .center-bottom-item{
                        @include flex(flex-start,flex-start);
                        flex-direction: row;
                        margin-right: 30rpx;
                        img{
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }
                        text{
                            color: #666666;
                            height: 40rpx;
                            line-height: 40rpx;
                            font-size: 28rpx;
                            @include ellipsis(1)
                        }
                    }
                    .center-bottom-item:last-child{
                        margin-right: 0rpx;
                    }
                }
            }
        }
    }
    .page-flex-bottom{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 88rpx;
        z-index: 99;
        width: calc(100vw - 60rpx);
        background: #FFFFFF;
        padding: 20rpx 30rpx;
        @include flex(flex-start);
        flex-direction: row;
        border-top: 1rpx solid #E5E5E5;
        .flex-bottom-left{
            @include flex(flex-start);
            flex-direction: row;
            button{
                padding: 0;
                margin: 0;
                border: none;
                background: #FFFFFF;
                line-height: normal;
                width: 60rpx;
            }
            button::after{
                border: none;
            }
            img{
                width: 60rpx;
                height: 60rpx;
                margin-right: 20rpx;
            }
        }
        .flex-bottom-right{
            margin-left: auto;
            @include flex();
            flex-direction: row;
            button{
                height: 88rpx;
                padding: 0 37rpx;
                line-height: 88rpx;
                border-radius: 44rpx;
                font-weight: bold;
                font-size: 30rpx;
                margin-left: 20rpx;
            }
            .grey{
                background: #999999;
                color: #FFFFFF;
            }
            .blue{
                background: #3782FF;
                color: #FFFFFF;
            }
            .purple{
                background: #725CFF;
                color: #FFFFFF;
            }
        }
    }
</style>
